<template>
    <div class="w-main h-main flex flex-col">
        <div class="flex-grow flex flex-row relative">
            <div class="flex-grow"></div>
            <div class="audio-menu-view absolute right-0 top-0 h-full border border-danger rounded divide-y divide-base"
                :class="showMenu ? 'expand' : ''">
                <AudioList :list="audioList" />
            </div>
        </div>
        <div class="flex-shrink-0 flex flex-row flex-nowrap gap-4 justify-between border border-info">
            <div class="w-96 flex flex-row flex-nowrap gap-2 justify-start items-center">
                <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" fit="contain"
                    style="height: 60px;" />
                <div>
                    <div class="text-title text-nowrap truncate">{{ "十分十二寸" }}</div>
                    <div class="text-sm text-regular">{{ "林子祥" }}</div>
                </div>
            </div>
            <BottomBar v-model:playing="playing" v-model:volume="volume" v-model:process="process" @prev="prev"
                @pause="pause" @next="next" @menu="menu" />
        </div>
    </div>
</template>

<script setup lang="ts">
import BottomBar from './BottomBar.vue';
import AudioList from './AudioList.vue';

import { ref } from 'vue';

const audioList = ref([1, 2, 3, 4, 5])
const showMenu = ref(false)

const playing = ref(false)
const volume = ref(0.6)
const process = ref(0)


const prev = () => { }
const pause = () => {
    playing.value = !playing.value
}
const next = () => { }
const menu = () => { showMenu.value = !showMenu.value }
</script>

<style scoped>
.audio-menu-view {
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: right;
    transform: scaleY(0);
}

.audio-menu-view.expand {
    max-width: 384px;
    width: 384px;
    transform: scaleY(1);
}
</style>